<html>
<head>
    <title>打地鼠</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <audio src="audio/music.mp3" autoplay loop></audio>
    <audio src="audio/dazhong.wav" id="yinxiao"></audio>
    <div id="score">得分：0</div>
    <table>
        <tr>
            <td><img src="image/mouse.png" alt=""></td>
            <td><img src="image/mouse.png" alt=""></td>
            <td><img src="image/mouse.png" alt=""></td>
            <td><img src="image/mouse.png" alt=""></td>
        </tr>
        <tr>
            <td><img src="image/mouse.png" alt=""></td>
            <td><img src="image/mouse.png" alt=""></td>
            <td><img src="image/mouse.png" alt=""></td>
            <td><img src="image/mouse.png" alt=""></td>
        </tr>
        <tr>
            <td><img src="image/mouse.png" alt=""></td>
            <td><img src="image/mouse.png" alt=""></td>
            <td><img src="image/mouse.png" alt=""></td>
            <td><img src="image/mouse.png" alt=""></td>
        </tr>
        <tr>
            <td><img src="image/mouse.png" alt=""></td>
            <td><img src="image/mouse.png" alt=""></td>
            <td><img src="image/mouse.png" alt=""></td>
            <td><img src="image/mouse.png" alt=""></td>
        </tr>
    </table>
</body>
<script>
    // 获得所有的img标签
    var mouses = document.getElementsByTagName("img");
    // 定义一个函数，用于显示一只老鼠
    function showOne() {
        // 0-1的随机数
        var n = Math.random();
        n = n * 16;
        // 向下取整
        n = Math.floor(n);
        // 第五只老鼠，从0开始
        mouses[n].classList.add("show");
        mouses[n].t = true;
        function hide() {
            mouses[n].classList.remove("show");
        }
        // 两秒之后，调用hide函数，使老鼠隐藏
        setTimeout(hide, 2000);
    }
    // 1秒后调用showOne函数
    // setTimeout(showOne,1000);
    function showSome() {
        showOne();
        showOne();
    }
    // 隔一秒出来一个
    setInterval(showSome, 1000);
    var player = document.getElementById("yinxiao");
    var score = 0;
    var board = document.getElementById("score");
    for (var i = 0; i < mouses.length; i++) {
        function md(e) {
            e.target.classList.remove("show");
            player.load();
            player.play();
            if (e.target.t) {
                score = score + 10;
                board.textContent = "得分：" + score;
                e.target.t = false;
            }
        }
        mouses[i].onclick = md;
    }
    document.body.onmousedown = function (e) {
        document.body.style.cursor = "url(image/cursor-down.png),auto";
    }
    document.body.onmouseup = function (e) {
        document.body.style.cursor = "url(image/cursor.png),auto";
    }
    document.body.ondrop = function (e) {
        e.stopPropagation();
        e.preventDefault();
    }
</script>

</html>